<template>
  <Teleport to="body">
    <transition name="modal-fade">
      <div v-if="isShowing" class="modal-overlay">
        <div class="modal-wrapper" @click.self="closeModal">
          <div class="modal-content">
            <slot></slot>
          </div>
        </div>
      </div>
    </transition>
  </Teleport>
</template>

<script setup>
import { ref } from 'vue';

// 定义弹窗是否显示的状态
const isShowing = ref(false);

// 显示弹窗的方法
const openModal = () => {
  isShowing.value = true;
};

// 关闭弹窗的方法
const closeModal = () => {
  isShowing.value = false;
};

// 向父组件暴露打开和关闭方法
defineExpose({
  openModal,
  closeModal,
});
</script>

<style scoped>
.modal-fade-enter-active,
.modal-fade-leave-active {
  transition: opacity 0.3s ease;
}

.modal-fade-enter-from,
.modal-fade-leave-to {
  opacity: 0;
}
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.modal-content {
  /* 可以根据需要进一步定制内容区样式 */
}
</style>